<template>
  <div class="container">
    <div class="dlform" style="width:350px;background-color:white;padding:10px 20px 10px 10px;">
    <el-form ref="form" :model="form" label-width="80px">
      <h1 class="login-title">BK管理系统</h1>
      <el-form-item label="用户：">
        <el-input v-model="form.loginName"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="form.loginKey"></el-input>
      </el-form-item>
      <el-form-item label="记住：">
        <el-switch  v-model="form.remeber"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button @click="onsubmit" type="primary">登录</el-button>
        <el-button @click="form={}">清空</el-button>
        <el-link style="margin-left:10px" type="primary" :underline="false">新用户注册</el-link>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      maps: {
        admin: "管理员",
        editor: "编辑者",
        user: "普通用户"
      }
    };
  },
  methods: {
    async onsubmit() {
      await this.$store.dispatch("users/doLogin", this.form);

      this.$router.push("/");
    }
  }
};
</script>

<style scoped>
.login {
  width: 300px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid;
}

.log_siz {
  font-size: 20px;
}

.ipt {
  width: 250px;
  margin-top: 5px;
}

.login_footer {
  margin-top: 20px;
  margin-left: 20px;
}
.container {
  height: 100vh;
  background-color: rgb(241, 226, 229);
}
.dlform {
  border-radius: 10px;
  position: relative;
  position: absolute;
  top: 30px;
  right: 30px;
}
</style>